<template>
  <div id="RetrievePassword">
    <div id="container">
      <div class="header">
        <span class="title">找回密码</span>
      </div>
      <div class="body">
        <div id="steps">
          <el-steps :active="active" align-center>
            <el-step title="第一步" />

            <el-step title="第二步" />

            <el-step title="第三步" />
          </el-steps>
        </div>
        <div id="setp_1" v-show="active == 0">
          <el-input
            size="large"
            placeholder="请输入用户名"
            v-model="user.username"
          ></el-input>
          <el-input size="large" placeholder="请输入邮箱" v-model="user.email"></el-input>
        </div>

        <div id="step_2" v-show="active == 1">
          <el-input
            size="large"
            placeholder="请输入验证码"
            v-model="user.verificationCode"
          ></el-input>
          <el-button size="large" @click="getCode" type="primary" plain
            >获取验证码</el-button
          >
        </div>

        <div id="step_3" v-show="active == 2">
          <el-input
            size="large"
            placeholder="重置密码"
            v-model="user.newPassword"
          ></el-input>
          <el-input
            size="large"
            placeholder="确认密码"
            v-model="user.reNewPassWord"
          ></el-input>
        </div>

        <div class="footer">
          <el-button size="large" style="width: 60px" v-show="active < 3" @click="quit"
            >取 &nbsp; 消</el-button
          >
          <el-button size="large" type="primary" @click="next" v-show="active < 3">{{
            btn
          }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useClientStore } from "@/pinia/stores/client";
import router from "@/route";
import { el } from "element-plus/es/locale";
import { reactive, ref } from "vue";

const client = useClientStore().client;
const active = ref(0);
const user = reactive({
  username: "",
  email: "",
  verificationCode: "",
  code: "",
  newPassword: "",
  reNewPassWord: "",
});

let btn = ref("下一步");

const getCode = async () => {
  const ret = await client.callApi("Login/TestEmail", {
    email: user.email,
  });
  if (ret.isSucc) {
    ret.res.code;

    console.log(ret.res.code);
    user.code = ret.res.code;
    console.log(user.code);
  } else {
  }
};

const quit = async () => {
  router.replace({ name: "login" });
};

const next = async () => {
  // if (active.value++ > 2) active.value = 0

  if (active.value === 0) {
    const ret = await client.callApi("Login/NameEmail", {
      name: user.username,
      email: user.email,
    });
    if (ret.isSucc) {
      console.log(ret);
      active.value++;
      console.log(active.value);
    }
  }

  if (active.value == 1) {
    if (user.code == "") {
      return;
    }
    if (user.verificationCode === user.code) {
      ElMessage.success("验证通过");
      active.value++;
      btn.value = "确认修改";
    } else {
      ElMessage.warning("请重新核对验证码");
    }
  }

  if (active.value == 2) {
    if (user.newPassword == "") {
      return;
    }

    if (user.newPassword === user.reNewPassWord) {
      //发送请求
      const ret = await client.callApi("Login/FindPass", {
        email: user.email,
        password: user.newPassword,
      });
      if (ret.isSucc) {
        ElMessage.success("重置密码成功");
        // active.value++;
        router.replace({ name: "login" });
      }
    } else {
      ElMessage.warning("两次密码不匹配");
    }
  }

  // if(active.value==3){
  //   ElMessage.success("重置密码成功")
  //   router.replace({name:'login'})

  // }
};
</script>

<style lang="less" scoped>
#container {
  background-color: whitesmoke;
  width: 400px;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  box-sizing: content-box;
  padding: 5px;

  .header {
    padding: 20px;
    padding-bottom: 10px;
    .title {
      line-height: 24px;
      font-size: 18px;
      color: #303133;
    }
  }
  .body {
    padding: 10px 20px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }
  .footer {
    text-align: right;
    margin-bottom: 22px;
  }

  #steps {
    // width: 315px;
    margin-bottom: 25px;
  }

  .el-input {
    // margin: 10px;
    margin-bottom: 25px;
  }
}
</style>
